<template>
    <div>
        <!-- {{ list }}
           -->
        <ul>
            <li v-for="item in list" :key="item.id" @click="$router.push('/xq/')+item.id">
                <img :src="item.image" alt="">
                <p>{{ item.title }}</p>
                <p>{{ item.price }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup>
import request from '@/uitle/request'
import {ref} from 'vue'
import { onMounted } from 'vue'

const list = ref([])


onMounted(() => {
//   console.log(`the component is now mounted.`)
    request.get('/list',{
        params:{pagination:1, pageNum:30}
    }).then((res)=>{
        if(res.data.code==200){
            console.log(res);
            list.value=res.data.data
        }
    })
})
</script>

<style lang="scss" scoped>
ul{
    column-count: 2;
}
</style>